<template>
  <div>
    <div class="info">
      <a-form-item label="模板名称" required :wrapperCol="{ span: 18 }" :labelCol="{ span: 6 }" style="width: 350px; margin-right: 60px">
        <a-input v-model="name" placeholder="请输入" style="width: 250px" />
      </a-form-item>
      <a-form-item label="事件类型" required :wrapperCol="{ span: 18 }" :labelCol="{ span: 6 }" style="width: 350px">
        <a-select v-model="eventType" :options="eventTypeLst" placeholder="请选择" style="width: 250px" />
      </a-form-item>
      <a-popconfirm @confirm="addEventType">
        <div class="btn">
          <a-icon type="plus-circle" />
          自定义类型
        </div>
        <span slot="icon"></span>
        <a-form-item slot="title" required label="添加事件类型">
          <a-input v-model="eventTypeNew"></a-input>
        </a-form-item>
      </a-popconfirm>
    </div>
    <a-divider dashed></a-divider>
    <div v-if="empFields && empFields.length > 0">
      <div class="title">
        <span>员工个人信息</span>
      </div>
      <TemplateConfigTable
        :dataSource="empFields"
        :editIcon="false"
        :deleteIcon="false"
        :addIcon="false"
        @editOk="editEmpField"
        @sortItem="sortEmpField"
      />
    </div>
    <div style="margin-top: 24px">
      <div class="title">
        <span>事件概况</span>
      </div>
      <TemplateConfigTable :dataSource="eventFields" @editOk="editEventField" @delItem="deleteEventField" @sortItem="sortEventField" />
    </div>
  </div>
</template>
<script>
import { empFieldsSource, generateFieldItem } from "./funcs";
import TemplateConfigTable from "../components/templateConfigTable.vue";
import { loadEventTypeReq, addEventTypeReq } from "./api";
export default {
  name: "",
  components: { TemplateConfigTable },
  mixins: [],
  props: {
    isCreate: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      tempInfo: {},
      tempEmpInfo: {},
      tempEventInfo: {},
      name: "",
      eventType: undefined,
      eventTypeNew: "",
      eventTypeLst: [],
      empFields: [],
      eventFields: []
    };
  },
  computed: {
    groupKey() {
      return this.isCreate ? "formGroupAddList" : "formGroupUpdateList";
    },
    fieldKey() {
      return this.isCreate ? "formGroupFieldAddList" : "formGroupFieldUpdateList";
    }
  },
  watch: {},
  created() {
    this.loadEventType();
  },
  mounted() {
    if (this.isCreate) {
      this.initEmpFields();
    }
  },
  methods: {
    getValues() {
      return {
        templateType: "custom",
        ...this.tempInfo,
        templateName: this.name,
        eventType: this.eventType,
        [`${this.groupKey}`]: [
          {
            moduleName: "员工个人信息",
            moduleCode: "personalInfo",
            formType: "dycl",
            subjectType: "site",
            parentId: "0",
            ...this.tempEmpInfo,
            [`${this.fieldKey}`]: this.empFields.map((item, idx) => ({
              moduleName: "员工个人信息",
              moduleCode: "personalInfo",
              subjectType: "site",
              parentId: "0",
              ...item,
              sort: idx + 1
            }))
          },
          {
            moduleName: "事件概况",
            moduleCode: "eventOverview",
            formType: "dycl",
            subjectType: "site",
            parentId: "0",
            ...this.tempEventInfo,
            [`${this.fieldKey}`]: this.eventFields.map((item, idx) => ({
              moduleName: "事件概况",
              moduleCode: "eventOverview",
              subjectType: "site",
              parentId: "0",
              ...item,
              sort: idx + 1
            }))
          }
        ]
      };
    },
    setValues(initValues) {
      this.$nextTick(() => {
        const temp = { ...initValues };
        this.name = initValues.templateName;
        this.eventType = initValues.eventType;
        const tempEmp = { ...initValues.formGroupTree[0] };
        const tempEvent = { ...initValues.formGroupTree[1] };
        this.empFields = initValues.formGroupTree[0].formGroupFieldList;
        this.eventFields = initValues.formGroupTree[1].formGroupFieldList;
        delete temp.formGroupTree;
        this.tempInfo = temp;
        delete tempEmp.formGroupFieldList;
        this.tempEmpInfo = tempEmp;
        delete tempEvent.formGroupFieldList;
        this.tempEventInfo = tempEvent;
      });
    },
    editEmpField({ params, mode, index }) {
      if (mode === "add") {
        const newItem = generateFieldItem(params);
        this.empFields = [...this.empFields, newItem];
      } else if (mode === "edit") {
        const tempLst = [...this.empFields];
        tempLst[index] = generateFieldItem(params, tempLst[index]);
        this.empFields = tempLst;
      }
    },
    sortEmpField(oldIdx, newIdx) {
      const tempLst = [...this.empFields];
      const oldItem = tempLst[oldIdx];
      tempLst.splice(oldIdx, 1);
      tempLst.splice(newIdx, 0, oldItem);
      tempLst.forEach((item, index) => {
        item.sort = index + 1;
      });
      this.empFields = tempLst;
    },
    editEventField({ params, mode, index }) {
      if (mode === "add") {
        const newItem = generateFieldItem(params);
        this.eventFields = [...this.eventFields, newItem];
      } else if (mode === "edit") {
        const tempLst = [...this.eventFields];
        tempLst[index] = generateFieldItem(params, tempLst[index]);
        this.eventFields = tempLst;
      }
    },
    sortEventField(oldIdx, newIdx) {
      const tempLst = [...this.eventFields];
      const oldItem = tempLst[oldIdx];
      tempLst.splice(oldIdx, 1);
      tempLst.splice(newIdx, 0, oldItem);
      tempLst.forEach((item, index) => {
        item.sort = index + 1;
      });
      this.eventFields = tempLst;
    },
    deleteEventField(index) {
      const tempLst = [...this.eventFields];
      tempLst.splice(index, 1);
      this.eventFields = tempLst;
    },
    initEmpFields() {
      this.empFields = empFieldsSource.map((item) => {
        return generateFieldItem(item);
      });
    },
    addEventType() {
      addEventTypeReq({
        dictItemValue: this.eventTypeNew,
        dictItemKey: this.eventTypeNew,
        dictCode: "1216"
      })
        .then((res) => {
          if (res && res.code === 200) {
            this.$message.success("添加成功");
            this.loadEventType();
          } else {
            this.$message.error("添加失败");
          }
        })
        .catch((err) => {
          console.log("addEventType", err);
        });
    },
    loadEventType() {
      loadEventTypeReq()
        .then((res) => {
          if (res && res.data && res.data.length >= 0) {
            this.eventTypeLst = res.data.map((item) => {
              return {
                label: item.dictItemValue,
                value: item.dictItemValue
              };
            });
          } else {
            this.eventTypeLst = [];
          }
        })
        .catch((err) => {
          console.log("loadEventType", err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.info {
  display: flex;
  align-items: center;
  padding: 0 24px;
  ::v-deep .ant-form-item {
    margin-bottom: 0;
  }
  .btn {
    cursor: pointer;
    color: var(--primary);
  }
}
.title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 16px;
  font-weight: 500;
  border-left: 3px solid var(--primary);
  padding-left: 12px;
  margin-bottom: 24px;
}
</style>
